<template>
  <div class="app-container">
    <!-- 主内容区 -->
    <div class="content-container">
      <!-- 页面标题区 -->
      <div class="page-header">
        <div class="header-left">
          <h2 class="page-title">
            <el-icon class="title-icon"><Collection /></el-icon>
            图书管理系统
          </h2>
          <p class="page-subtitle">共 {{ totalBooks }} 本图书</p>
        </div>
        <div class="header-right">
          <el-button type="primary" class="add-btn" @click="handleAddBook">
            <el-icon><Plus /></el-icon>
            新增图书
          </el-button>
        </div>
      </div>

      <!-- 操作工具栏 -->
      <div class="action-toolbar">
        <div class="toolbar-content">
          <div class="batch-actions" >
            <el-button
                type="danger"
                :disabled="selectedBooks.length === 0"
                @click="handleBatchDelete"
                plain
            >
              <el-icon><Delete /></el-icon>
              批量删除 ({{ selectedBooks.length }})
            </el-button>
          </div>

          <div class="filter-group">
            <el-input
                v-model="searchQuery"
                placeholder="搜索..."
                clearable
                class="search-input"
                @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
            </el-input>

            <el-select
                v-model="statusFilter"
                placeholder="状态"
                clearable
                class="filter-select"
            >
              <el-option label="全部状态" value="all" />
              <el-option label="在库" value="available" />
              <el-option label="借出" value="borrowed" />
              <el-option label="维修" value="maintenance" />
            </el-select>

            <el-select
                v-model="categoryFilter"
                placeholder="分类"
                clearable
                class="filter-select"
            >
              <el-option label="全部分类" value="all" />
              <el-option
                  v-for="category in categories"
                  :key="category.id"
                  :label="category.name"
                  :value="category.id"
              />
            </el-select>
          </div>

          <div class="search-container">
            <el-input
                v-model="searchQuery"
                placeholder="搜索书名、作者或ISBN..."
                clearable
                class="search-input"
                @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
              <template #suffix>
                <el-button
                    v-if="searchQuery"
                    link
                    class="search-btn"
                    @click="handleSearch"
                >
                  搜索
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-cards">
        <div class="stat-card available">
          <div class="stat-icon">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ availableCount }}</div>
            <div class="stat-label">在库图书</div>
          </div>
        </div>
        <div class="stat-card borrowed">
          <div class="stat-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ borrowedCount }}</div>
            <div class="stat-label">已借出</div>
          </div>
        </div>
        <div class="stat-card maintenance">
          <div class="stat-icon">
            <el-icon><Tools /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ maintenanceCount }}</div>
            <div class="stat-label">维修中</div>
          </div>
        </div>
        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon><Collection /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ totalBooks }}</div>
            <div class="stat-label">总图书</div>
          </div>
        </div>
      </div>

      <!-- 图书列表 -->
      <div class="book-table-container">
        <div class="table-header">
          <h3 class="table-title">图书列表</h3>
          <div class="table-actions">
            <el-button-group class="view-toggle">
              <el-button
                  :type="viewMode === 'table' ? 'primary' : ''"
                  size="small"
                  @click="viewMode = 'table'"
              >
                <el-icon><List /></el-icon>
              </el-button>
              <el-button
                  :type="viewMode === 'grid' ? 'primary' : ''"
                  size="small"
                  @click="viewMode = 'grid'"
              >
                <el-icon><Grid /></el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>

        <!-- 表格视图 -->
        <div v-if="viewMode === 'table'" class="table-view">
          <el-table
              v-loading="loading"
              :data="paginatedBooks"
              stripe
              border
              highlight-current-row
              style="width: 100%"
              class="book-table"
              @selection-change="handleSelectionChange"
              @row-click="handleRowClick"
              empty-text="暂无图书数据"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="id" label="ID" width="80" align="center" sortable></el-table-column>

            <el-table-column prop="bookName" label="书名" min-width="200" sortable>
              <template #default="scope">
                <div class="book-info">
                  <div class="book-title">{{ scope.row.bookName }}</div>
                  <div class="book-subtitle">{{ scope.row.description || '暂无描述' }}</div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="author" label="作者" width="120" sortable>
              <template #default="scope">
                <div class="author-info">
                  <el-icon><User /></el-icon>
                  <span>{{ scope.row.author }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="isbn" label="ISBN" width="150" sortable>
              <template #default="scope">
                <el-tag type="info" size="small" effect="plain">
                  {{ scope.row.isbn }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="book_type" label="分类" width="120">
              <template #default="scope">
                <el-tag :type="getCategoryTagType(scope.row.bookType)" effect="plain" size="small">
                  {{ scope.row.bookType }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="状态" width="120" align="center">
              <template #default="scope">
                <div class="status-container">
                  <el-tag
                      :type="getStatusTagType(scope.row.status)"
                      effect="light"
                      round
                      size="small"
                  >
                    <el-icon class="status-tag-icon">
                      <CircleCheck v-if="scope.row.status === 0" />
                      <Clock v-else-if="scope.row.status === 1" />
                      <Tools v-else />
                    </el-icon>
                    {{ getStatusText(scope.row.status) }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="publish_date" label="出版日期" width="120" align="center" sortable>
              <template #default="scope">
                <div class="date-container">
                  <el-icon><Calendar /></el-icon>
                  <span class="date-text">{{ formatDate(scope.row.publishDate) }}</span>
                </div>
              </template>
            </el-table-column>


            <el-table-column label="操作" width="200" fixed="right" align="center">
              <template #default="scope">
                <div class="action-buttons">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                        type="primary"
                        size="small"
                        class="table-btn"
                        @click.stop="handleEdit(scope.row)"
                        plain
                        circle
                    >
                      <el-icon><Edit /></el-icon>
                    </el-button>
                  </el-tooltip>

                  <el-tooltip content="删除" placement="top">
                    <el-button
                        type="danger"
                        size="small"
                        class="table-btn"
                        @click.stop="handleDelete(scope.row)"
                        plain
                        circle
                    >
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </el-tooltip>

                  <el-tooltip
                      :content="scope.row.status === 0 ? '借阅' : '查看详情'"
                      placement="top"
                  >
                    <el-button
                        :type="scope.row.status === 0 ? 'success' : 'info'"
                        size="small"
                        class="table-btn"
                        @click.stop="scope.row.status === 0 ? handleBorrow(scope.row) : handleRowClick(scope.row)"
                        plain
                        circle
                    >
                      <el-icon>
                        <Reading v-if="scope.row.status === 0" />
                        <View v-else />
                      </el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 网格视图 -->
        <div v-else class="grid-view">
          <div class="book-grid" v-loading="loading">
            <div
                v-for="book in paginatedBooks"
                :key="book.id"
                class="book-card"
                @click="handleRowClick(book)"
            >
              <div class="book-card-cover">
                <el-image
                    :src="book.cover_image || defaultCoverUrl"
                    class="card-cover-image"
                    fit="cover"
                >
                  <template #error>
                    <div class="card-cover-error">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div class="book-status-overlay">
                  <el-tag
                      :type="getStatusTagType(book.status)"
                      size="small"
                      round
                      effect="dark"
                  >
                    {{ getStatusText(book.status) }}
                  </el-tag>
                </div>
              </div>
              <div class="book-card-content">
                <h4 class="card-title">{{ book.bookName }}</h4>
                <p class="card-author">{{ book.author }}</p>
                <p class="card-category">{{ book.book_type }}</p>
                <div class="card-actions">
                  <el-button size="small" @click.stop="handleEdit(book)">
                    <el-icon><Edit /></el-icon>
                  </el-button>
                  <el-button
                      size="small"
                      type="success"
                      v-if="book.status === 0"
                      @click.stop="handleBorrow(book)"
                  >
                    <el-icon><Reading /></el-icon>
                  </el-button>
                  <el-button size="small" type="danger" @click.stop="handleDelete(book)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
            background
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredBooks.length"
            class="custom-pagination"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 图书详情对话框 -->
    <el-dialog
        v-model="detailVisible"
        title="图书详情"
        width="600px"
        :before-close="() => detailVisible = false"
    >
      <div class="book-detail" v-if="detailBook">
        <div class="detail-cover">
          <el-image
              :src="detailBook.cover_image || defaultCoverUrl"
              class="detail-cover-image"
              fit="cover"
          >
            <template #error>
              <div class="detail-cover-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
        <div class="detail-info">
          <h3>{{ detailBook.bookName }}</h3>
          <div class="detail-item">
            <label>作者：</label>
            <span>{{ detailBook.author }}</span>
          </div>
          <div class="detail-item">
            <label>ISBN：</label>
            <span>{{ detailBook.isbn }}</span>
          </div>
          <div class="detail-item">
            <label>分类：</label>
            <el-tag>{{ detailBook.bookType }}</el-tag>
          </div>
          <div class="detail-item">
            <label>状态：</label>
            <el-tag :type="getStatusTagType(detailBook.status)">
              {{ getStatusText(detailBook.status) }}
            </el-tag>
          </div>
          <div class="detail-item">
            <label>出版日期：</label>
            <span>{{ formatDate(detailBook.publishDate) }}</span>
          </div>
          <div class="detail-item">
            <label>描述：</label>
            <p>{{ detailBook.description || '暂无描述' }}</p>
          </div>
        </div>
      </div>
    </el-dialog>


          <el-dialog
                  v-model="dialogVisible"
                  :title="dialogTitle"
                  width="600px"
                  :before-close="handleClose"
          >
              <el-form
                      ref="formRef"
                      :model="formData"
                      :rules="rules"
                      label-width="100px"
                      label-position="left"
              >
                  <el-form-item label="图书名称" prop="bookName">
                      <el-input v-model="formData.bookName" placeholder="请输入图书名称" />
                  </el-form-item>

                  <el-form-item label="ISBN" prop="isbn">
                      <el-input v-model="formData.isbn" placeholder="请输入ISBN号" />
                  </el-form-item>

                  <el-form-item label="作者" prop="author">
                      <el-input v-model="formData.author" placeholder="请输入作者" />
                  </el-form-item>

                  <el-form-item label="分类" prop="bookType">
                      <el-select
                              v-model="formData.bookType"
                              placeholder="请选择分类"
                              style="width: 100%"
                      >
                          <el-option
                                  v-for="category in categories"
                                  :key="category.id"
                                  :label="category.name"
                                  :value="category.id"
                          />
                      </el-select>
                  </el-form-item>

                  <el-form-item label="出版社" prop="publisher">
                      <el-input v-model="formData.publisher" placeholder="请输入出版社" />
                  </el-form-item>

                  <el-form-item label="出版日期" prop="publishDate">
                      <el-date-picker
                              v-model="formData.publishDate"
                              type="date"
                              placeholder="选择出版日期"
                              style="width: 100%"
                              value-format="YYYY-MM-DD"
                      />
                  </el-form-item>

                  <el-form-item label="图书封面" prop="coverImage">
                      <el-upload
                              class="avatar-uploader"
                              action="#"
                              :show-file-list="false"
                              :auto-upload="false"
                              :on-change="handleCoverChange"
                      >
                          <img v-if="formData.coverImage" :src="formData.coverImage" class="avatar" />
                          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                      </el-upload>
                  </el-form-item>

                  <el-form-item label="图书状态" prop="status">
                      <el-radio-group v-model="formData.status">
                          <el-radio :label="0">可借阅</el-radio>
                          <el-radio :label="1">借阅中</el-radio>
                          <el-radio :label="2">维修中</el-radio>
                      </el-radio-group>
                  </el-form-item>

                  <el-form-item label="图书描述" prop="description">
                      <el-input
                              v-model="formData.description"
                              type="textarea"
                              :rows="3"
                              placeholder="请输入图书描述"
                      />
                  </el-form-item>
              </el-form>

              <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose" >取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认修改</el-button>
      </span>
              </template>
          </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {  getBooks, updateBook } from "@/api/book"
import router from "@/router";
// import * as formRef from "lodash-es";

// 数据状态
const loading = ref(false)
const booksData = ref([])
const selectedBooks = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalBooks = ref(0)
const searchQuery = ref('')
const statusFilter = ref('all')
const categoryFilter = ref('all')
const viewMode = ref('table') // 新增：视图模式

// 对话框控制
const dialogVisible = ref(false)
const detailVisible = ref(false)
const importVisible = ref(false)
const dialogTitle = ref('新增图书')

// 表单数据
const formData = reactive({
  id: '',
  bookNo: '',
  bookName: '',
  bookType: '',
  author: '',
  description: '',
  publisher: '',
  publishDate: '',
  coverImage: '',
  status: 0,
  isbn: '',
  quantity: 1
})

// 当前查看的图书详情
const detailBook = ref({})

// 默认封面
const defaultCoverUrl = 'https://via.placeholder.com/120x160/f0f0f0/666666?text=No+Cover'

// 分类数据
const categories = ref([
  { id: 1, name: '文学' },
  { id: 2, name: '科技' },
  { id: 3, name: '历史' },
  { id: 4, name: '艺术' },
  { id: 5, name: '教育' }
])

// 状态映射
const statusMap = {
  0: { text: '可借阅', type: 'success', frontValue: 'available' },
  1: { text: '借阅中', type: 'warning', frontValue: 'borrowed' },
  2: { text: '维修中', type: 'danger', frontValue: 'maintenance' }
}



// 统计数据计算属性
const availableCount = computed(() => booksData.value.filter(book => book.status === 0).length)
const borrowedCount = computed(() => booksData.value.filter(book => book.status === 1).length)
const maintenanceCount = computed(() => booksData.value.filter(book => book.status === 2).length)

// 获取状态标签类型
const getStatusTagType = (status) => {
  const map = {
    0: 'success',
    1: 'warning',
    2: 'danger'
  }
  return map[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  return statusMap[status]?.text || '未知状态'
}

// watch(() => props.visible, (val) => {
//     dialogVisible.value = val
//     if (val) {
//         Object.assign(formData, props.bookData)
//     }
// })

// 提交表单
const handleSubmit = async () => {
    try {
        // await formRef.value.validate()
        await updateBook(formData)
        ElMessage.success('图书信息更新成功')


        handleClose()
    } catch (error) {
        console.error('更新图书失败:', error)
        if (error !== 'validate') {
            ElMessage.error('更新图书失败，请重试')
        }
    }
}


// 关闭对话框
const handleClose = () => {
    // formRef.value?.resetFields()
    dialogVisible.value = false
}

// 获取分类标签类型
const getCategoryTagType = (categoryName) => {
  const types = ['', 'success', 'warning', 'danger', 'info']
  const hash = categoryName.split('').reduce((a, b) => {
    a = ((a << 5) - a) + b.charCodeAt(0)
    return a & a
  }, 0)
  return types[Math.abs(hash) % types.length]
}

// 过滤后的图书数据
const filteredBooks = computed(() => {
  return booksData.value.filter(book => {
    // 状态过滤
    if (statusFilter.value !== 'all') {
      const frontStatus = statusMap[book.status]?.frontValue
      if (frontStatus !== statusFilter.value) {
        return false
      }
    }

    // 分类过滤
    if (categoryFilter.value !== 'all' && book.book_type !== categoryFilter.value) {
      return false
    }

    // 搜索过滤
    if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase()
      return (
          book.bookName.toLowerCase().includes(query) ||
          book.author.toLowerCase().includes(query) ||
          book.isbn.toLowerCase().includes(query)
      )
    }

    return true
  })
})

// 分页后的数据
const paginatedBooks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredBooks.value.slice(start, end)
})

// 获取图书数据
const fetchBooks = async () => {
  try {
    loading.value = true
    const response = await getBooks()

    booksData.value = response

    totalBooks.value = booksData.value.length
  } catch (error) {
    ElMessage.error('获取图书数据失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 借阅图书方法
const handleBorrow = (row) => {
  if (row.status !== 0) {
    ElMessage.warning(`图书当前状态为${getStatusText(row.status)}，不可借阅`)
    return
  }

  ElMessageBox.confirm(`确定要借阅《${row.bookName}》吗？`, '借阅确认', {
    confirmButtonText: '确认借阅',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      row.status = 1
      ElMessage.success('借阅成功')
    } catch (error) {
      ElMessage.error('借阅失败')
      console.error(error)
    }
  }).catch(() => {
    ElMessage.info('已取消借阅')
  })
}

// 初始化加载数据
onMounted(() => {
  fetchBooks()
})

// 日期格式化
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString()
}

// 表格行选择变化
const handleSelectionChange = (selection) => {
  selectedBooks.value = selection
}

// 表格行点击
const handleRowClick = (row) => {
  detailBook.value = row
  detailVisible.value = true
}

// 新增图书
const handleAddBook = () => {
  dialogTitle.value = '新增图书'
  resetForm()
    router.push('/MianLayout/bookadd')
}

// 编辑图书
const handleEdit = (row) => {
  dialogTitle.value = '编辑图书'
  dialogVisible.value = true
  Object.assign(formData, row)

}

// 删除图书
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除《${row.bookName}》吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      ElMessage.success('删除成功')
      fetchBooks()
    } catch (error) {
      ElMessage.error('删除失败')
      console.error(error)
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 批量删除
const handleBatchDelete = () => {
  if (selectedBooks.value.length === 0) return

  ElMessageBox.confirm(
      `确定要删除选中的 ${selectedBooks.value.length} 本图书吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    try {
      ElMessage.success(`成功删除 ${selectedBooks.value.length} 本图书`)
      selectedBooks.value = []
      fetchBooks()
    } catch (error) {
      ElMessage.error('批量删除失败')
      console.error(error)
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 提交表单


// 导出数据


// 搜索
const handleSearch = () => {
  currentPage.value = 1
}

// 分页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

// 页码变化
const handlePageChange = (page) => {
  currentPage.value = page
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    id: '',
    book_no: '',
    bookName: '',
    bookType: '',
    author: '',
    description: '',
    publisher: '',
    publish_date: '',
    cover_image: '',
    status: 0,
    isbn: '',
    quantity: 1
  })
}
</script>

<style scoped lang="scss">
// 主容器样式
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

.content-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 页面标题区
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  color: white;
  margin-bottom: 10px;

  .header-left {
    .page-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 28px;
      font-weight: 700;
      margin: 0;
      margin-bottom: 8px;

      .title-icon {
        font-size: 32px;
      }
    }

    .page-subtitle {
      font-size: 16px;
      opacity: 0.9;
      margin: 0;
    }
  }

  .add-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }
  }
}

// 统计卡片
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 10px;

  .stat-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    border-left: 4px solid;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
    }

    .stat-content {
      .stat-number {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 5px;
      }

      .stat-label {
        font-size: 14px;
        color: #666;
        font-weight: 500;
      }
    }

    &.available {
      border-left-color: #67c23a;
      .stat-icon {
        background: linear-gradient(135deg, #67c23a, #85ce61);
      }
      .stat-number {
        color: #67c23a;
      }
    }

    &.borrowed {
      border-left-color: #e6a23c;
      .stat-icon {
        background: linear-gradient(135deg, #e6a23c, #ebb563);
      }
      .stat-number {
        color: #e6a23c;
      }
    }

    &.maintenance {
      border-left-color: #f56c6c;
      .stat-icon {
        background: linear-gradient(135deg, #f56c6c, #f78989);
      }
      .stat-number {
        color: #f56c6c;
      }
    }

    &.total {
      border-left-color: #409eff;
      .stat-icon {
        background: linear-gradient(135deg, #409eff, #66b1ff);
      }
      .stat-number {
        color: #409eff;
      }
    }
  }
}

// 操作工具栏
.action-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 25px 30px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  .left-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;

    .action-btn {
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 10px;
      transition: all 0.3s ease;
      border: 2px solid;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      }

      &.batch-delete-btn:disabled {
        opacity: 0.5;
        transform: none;
        box-shadow: none;
      }
    }
  }

  .right-filters {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;

    .filter-group {
      display: flex;
      gap: 12px;
    }

    .filter-select {
      width: 140px;

      :deep(.el-input__wrapper) {
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
        }
      }
    }

    .search-container {
      .search-input {
        width: 300px;

        :deep(.el-input__wrapper) {
          border-radius: 25px;
          padding: 0 20px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;

          &:hover, &:focus {
            box-shadow: 0 4px 20px rgba(64, 158, 255, 0.2);
            border-color: #409eff;
          }
        }

        .search-icon {
          color: #409eff;
        }

        .search-btn {
          color: #409eff;
          font-weight: 500;
        }
      }
    }
  }
}


.action-toolbar {
  background: white;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);

  .toolbar-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .batch-actions {

    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  .filter-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;

    .search-input {
      width: 220px;

      .el-input__wrapper {
        border-radius: 8px;
        padding-left: 10px;
      }
    }

    .filter-select {
      width: 120px;

      .el-input__wrapper {
        border-radius: 8px;
      }
    }
  }
}



// 选项内容样式
.option-content {
  display: flex;
  align-items: center;
  gap: 8px;

  .status-icon {
    &.success { color: #67c23a; }
    &.warning { color: #e6a23c; }
    &.danger { color: #f56c6c; }
  }
}

// 表格容器
.book-table-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px 20px;
    border-bottom: 1px solid #f0f0f0;

    .table-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }

    .view-toggle {
      :deep(.el-button) {
        border-radius: 8px;
      }
    }
  }

  // 表格视图
  .table-view {
    padding: 0 30px 30px;

    .book-table {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #f0f0f0;

      :deep(.el-table__header) {
        th {
          background: linear-gradient(135deg, #f8fafc, #f1f3f4);
          color: #333;
          font-weight: 600;
          height: 55px;
          border-bottom: 2px solid #e0e6ed;
        }
      }

      :deep(.el-table__row) {
        transition: all 0.3s ease;

        &:hover {
          background: linear-gradient(135deg, #f8fafc, #f0f7ff) !important;
          transform: scale(1.001);
        }

        td {
          padding: 15px 0;
          border-bottom: 1px solid #f5f5f5;
        }
      }

      .book-info {
        .book-title {
          font-weight: 600;
          color: #333;
          margin-bottom: 5px;
          font-size: 15px;
        }

        .book-subtitle {
          font-size: 12px;
          color: #888;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 180px;
        }
      }

      .author-info {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #666;
      }

      .status-container {
        .status-tag-icon {
          margin-right: 4px;
          font-size: 12px;
        }
      }

      .date-container {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #666;
        font-size: 13px;
      }

      .cover-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;

        .book-cover {
          width: 60px;
          height: 80px;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transition: all 0.3s ease;
          cursor: pointer;

          &:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
          }
        }

        .cover-error {
          width: 60px;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
          border-radius: 8px;
          color: #999;
          font-size: 20px;
        }
      }

      .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;

        .table-btn {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;

          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }

  // 网格视图
  .grid-view {
    padding: 0 30px 30px;

    .book-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 25px;

      .book-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        cursor: pointer;
        overflow: hidden;
        border: 1px solid #f0f0f0;

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
          border-color: #409eff;
        }

        .book-card-cover {
          position: relative;
          height: 200px;
          overflow: hidden;

          .card-cover-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s ease;
          }

          .card-cover-error {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
            color: #999;
            font-size: 30px;
          }

          .book-status-overlay {
            position: absolute;
            top: 12px;
            right: 12px;
          }

          &:hover .card-cover-image {
            transform: scale(1.1);
          }
        }

        .book-card-content {
          padding: 20px;

          .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 8px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .card-author {
            font-size: 14px;
            color: #666;
            margin: 0 0 6px 0;
          }

          .card-category {
            font-size: 12px;
            color: #888;
            margin: 0 0 15px 0;
          }

          .card-actions {
            display: flex;
            gap: 8px;
            justify-content: center;

            .el-button {
              flex: 1;
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
}

// 分页容器
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 25px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  .custom-pagination {
    :deep(.btn-prev),
    :deep(.btn-next),
    :deep(.number) {
      border-radius: 10px;
      margin: 0 4px;
      font-weight: 500;
    }

    :deep(.number.is-active) {
      background: linear-gradient(135deg, #409eff, #66b1ff);
      border-color: #409eff;
    }
  }
}

// 图书详情对话框
.book-detail {
  display: flex;
  gap: 30px;

  .detail-cover {
    flex-shrink: 0;

    .detail-cover-image {
      width: 150px;
      height: 200px;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .detail-cover-error {
      width: 150px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
      border-radius: 12px;
      color: #999;
      font-size: 30px;
    }
  }

  .detail-info {
    flex: 1;

    h3 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin: 0 0 20px 0;
    }

    .detail-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
      line-height: 1.6;

      label {
        font-weight: 600;
        color: #555;
        width: 80px;
        flex-shrink: 0;
      }

      span, p {
        color: #666;
        margin: 0;
      }

      p {
        line-height: 1.6;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .content-container {
    padding: 15px;
    max-width: 100%;
  }

  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
  }
}

@media (max-width: 992px) {
  .page-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 25px;

    .page-title {
      font-size: 24px;
    }
  }

  .action-toolbar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;

    .left-actions {
      justify-content: center;
    }

    .right-filters {
      flex-direction: column;
      gap: 12px;

      .filter-group {
        justify-content: center;
      }

      .search-container .search-input {
        width: 100%;
      }
    }
  }

  .book-detail {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .content-container {
    padding: 10px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
    gap: 12px;

    .stat-card {
      padding: 20px;

      .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
      }

      .stat-content .stat-number {
        font-size: 24px;
      }
    }
  }

  .book-table-container {
    .table-view {
      padding: 0 15px 20px;
      overflow-x: auto;
    }

    .grid-view .book-grid {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 15px;
    }
  }

  .action-toolbar {
    padding: 20px;
  }

  .page-header {
    padding: 20px;

    .page-title {
      font-size: 20px;
    }
  }
}

// 加载动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.book-card,
.stat-card {
  animation: fadeInUp 0.5s ease-out;
}
</style>